<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    &lt;!&ndash; 定义文档类型为HTML5 &ndash;&gt;-->
<!--    <meta charset="UTF-8">-->
<!--    &lt;!&ndash; 网页标题显示为“员工列表” &ndash;&gt;-->
<!--    <title>员工列表</title>-->
<!--    <style>-->
<!--        /* CSS重置：统一标签的边距和内边距为0 */-->
<!--        body, table, tbody, thead, tr, th, td {-->
<!--            margin: 0;-->
<!--            padding: 0;-->
<!--        }-->

<!--        /* 表格样式：设置宽度、自动居中、边框合并、文本居中对齐，以及边框样式 */-->
<!--        table {-->
<!--            width: 50%;-->
<!--            margin: 20px auto;-->
<!--            border-collapse: collapse;-->
<!--            text-align: center;-->
<!--            vertical-align: middle;-->
<!--            border: 1px solid #ddd;-->
<!--        }-->

<!--        /* 表头样式：设置背景色、字体颜色和内边距 */-->
<!--        thead th {-->
<!--            background-color: #4CAF50;-->
<!--            color: white;-->
<!--            padding: 10px;-->
<!--        }-->

<!--        /* 表格行样式：为偶数行和奇数行设置不同的背景色 */-->
<!--        tbody tr:nth-child(even) {-->
<!--            background-color: #f9f9f9;-->
<!--        }-->
<!--        tbody tr:nth-child(odd) {-->
<!--            background-color: #ffffff;-->
<!--        }-->

<!--        /* 表格单元格样式：设置内边距和边框样式 */-->
<!--        td {-->
<!--            padding: 8px;-->
<!--            border: 1px solid #ddd;-->
<!--        }-->

<!--        /* 分页链接样式：设置文本居中、自动居中、内边距、外边距和边框样式 */-->
<!--        .pagination {-->
<!--            text-align: center;-->
<!--            margin: 20px auto;-->
<!--        }-->

<!--        /* 分页链接a标签样式：去除下划线、设置内边距、外边距、边框和背景色 */-->
<!--        .pagination a {-->
<!--            text-decoration: none;-->
<!--            padding: 8px 15px;-->
<!--            margin: 0 5px;-->
<!--            border: 1px solid #ddd;-->
<!--            background-color: #f8f8f8;-->
<!--        }-->

<!--        /* 分页链接a标签鼠标悬浮样式：改变背景色 */-->
<!--        .pagination a:hover {-->
<!--            background-color: #e9e9e9;-->
<!--        }-->
<!--    </style>-->
<!--</head>-->
<!--<body>-->
<!--&lt;!&ndash; 表格容器，包含员工数据的表头和表体 &ndash;&gt;-->
<!--<table id="empTb">-->
<!--    <thead>-->
<!--    <tr>-->
<!--        &lt;!&ndash; 表头单元格，列出了表格的列标题 &ndash;&gt;-->
<!--        <th>员工编号</th>-->
<!--        <th>员工姓名</th>-->
<!--        <th>员工工资</th>-->
<!--        <th>入职时间</th>-->
<!--        <th>部门编号</th>-->
<!--    </tr>-->
<!--    </thead>-->
<!--    <tbody>-->
<!--    &lt;!&ndash; 表格数据行将通过JavaScript动态生成并插入此标签内 &ndash;&gt;-->
<!--    </tbody>-->
<!--</table>-->

<!--&lt;!&ndash; 分页导航容器，包含首页、上一页、下一页和最后一页的链接 &ndash;&gt;-->
<!--<div class="pagination">-->
<!--    &lt;!&ndash; 分页链接，点击时将触发JavaScript函数进行页面跳转 &ndash;&gt;-->
<!--    <a href="javascript:void(0)" id="first" class="pages">首页</a>-->
<!--    <a href="javascript:void(0)" id="prev" class="pages">上一页</a>-->
<!--    <a href="javascript:void(0)" id="next" class="pages">下一页</a>-->
<!--    <a href="javascript:void(0)" id="last" class="pages">最后一页</a>-->
<!--</div>-->

<!--&lt;!&ndash; 引入jQuery库，用于简化JavaScript操作 &ndash;&gt;-->
<!--<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>-->

<!--<script>-->
<!--    // JavaScript脚本开始-->

<!--    // 格式化时间戳为易读的日期格式的函数-->
<!--    function formatTimestamp(timestamp) {-->
<!--        var date = new Date(timestamp); // 将时间戳转换为Date对象-->
<!--        var year = date.getFullYear(); // 获取年份-->
<!--        var month = ('0' + (date.getMonth() + 1)).slice(-2); // 获取月份，不足10补0-->
<!--        var day = ('0' + date.getDate()).slice(-2); // 获取日期，不足10补0-->
<!--        // 返回格式化的日期字符串-->
<!--        return `${year}-${month}-${day}`;-->
<!--    }-->

<!--    // 定义当前页码变量，初始化为1-->
<!--    var currPage = 1;-->
<!--    // 定义总页数变量，用于存储从服务器获取的总页数-->
<!--    var tPages;-->

<!--    // 当文档加载完成后执行的jQuery函数-->
<!--    $(function () {-->
<!--        // 定义获取员工列表的函数-->
<!--        var getEmpList = function (curr) {-->
<!--            // 发送AJAX请求到服务器获取当前页的员工数据-->
<!--            $.ajax({-->
<!--                type: 'post', // 请求类型为POST-->
<!--                url: '/listPage', // 请求的URL地址-->
<!--                dataType: 'json', // 期望服务器返回的数据类型为JSON-->
<!--                data: { // 发送到服务器的数据-->
<!--                    pageSize: 5, // 每页显示5条数据-->
<!--                    pageNum: curr // 当前页码-->
<!--                },-->
<!--                success: function (result) { // 请求成功，服务器返回数据后的回调函数-->
<!--                    // 清空当前表格体内容-->
<!--                    var $tbody = $("#empTb tbody");-->
<!--                    $tbody.empty();-->
<!--                    // 遍历服务器返回的员工数据列表-->
<!--                    $.each(result.empList, function (index, obj) {-->
<!--                        var formattedDate = formatTimestamp(obj.hireDate); // 格式化入职时间-->
<!--                        // 向表格体中添加一行员工数据-->
<!--                        $tbody.append(-->
<!--                            "<tr>" +-->
<!--                            "<td>" + obj.empId + "</td>" +-->
<!--                            "<td>" + obj.empName + "</td>" +-->
<!--                            "<td>" + obj.salary + "</td>" +-->
<!--                            "<td>" + formattedDate + "</td>" +-->
<!--                            "<td>" + (obj.dept ? obj.dept.deptId : '') + "</td>" +-->
<!--                            "</tr>"-->
<!--                        );-->
<!--                    });-->
<!--                    // 更新当前页码和总页数-->
<!--                    currPage = result.pageNum;-->
<!--                    tPages = result.totalPages;-->
<!--                },-->
<!--                error: function (jqXHR, textStatus, errorThrown) { // 请求失败时的回调函数-->
<!--                    // 打印错误信息-->
<!--                    console.log('Error: ' + textStatus + ' - ' + errorThrown);-->
<!--                }-->
<!--            });-->
<!--        };-->

<!--        // 为分页链接绑定点击事件-->
<!--        $(".pages").click(function (e) {-->
<!--            e.preventDefault(); // 阻止链接的默认行为-->
<!--            var page = $(this).attr("id"); // 获取当前点击的链接的ID-->
<!--            // 根据点击的链接更新当前页码-->
<!--            switch(page) {-->
<!--                case 'first':-->
<!--                    currPage = 1;-->
<!--                    break;-->
<!--                case 'prev':-->
<!--                    currPage = Math.max(1, currPage - 1);-->
<!--                    break;-->
<!--                case 'next':-->
<!--                    currPage = Math.min(tPages, currPage + 1);-->
<!--                    break;-->
<!--                case 'last':-->
<!--                    currPage = tPages;-->
<!--                    break;-->
<!--            }-->
<!--            // 重新请求当前页的数据-->
<!--            getEmpList(currPage);-->
<!--        });-->

<!--        // 页面加载完成后，自动获取第一页的员工数据-->
<!--        getEmpList(currPage);-->
<!--    });-->

<!--    // JavaScript脚本结束-->
<!--</script>-->
<!--</body>-->
<!--</html>-->